<template>
    <div class="toolbar-menu">
        <div class="item">
            <span @click="indexClick">首页</span>
        </div>
        <div class="item">
            <span>文件</span>
            <div class="menu">
                <ul>
                    <li @click="menuClick('exit')">退出</li>
                </ul>
            </div>
        </div>
        <div class="item" @click="devtoolClick">控制台</div>
        <div class="item" @click="refreshClick">刷新</div>
        <div class="item">
            <span>关于</span>
            <div class="menu">
                <ul>
                    <li @click="menuClick('update')">更新</li>
                    <li @click="menuClick('about')">关于</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import { ipcRenderer as render } from "electron";

  /**
   * @author 白雨浓
   * @date 2019/1/9 17:17
   *
   * ToolbarMenu
   **/
  export default {
    name: 'ToolbarMenu',
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(() => {
      })
    },
    methods: {
      menuClick(type) {
        switch (type) {
          case 'exit':
            render.send('window-close');
            break;
          case 'update':
            alert('暂无更新');
            break;
          case 'about':
            alert('关于');
            break;
          default:
            break;
        }
      },
      indexClick() {
        this.$router.push('/');
      },
      devtoolClick() {
        render.send('open-devtools');
      },
      refreshClick() {
        this.$router.go(0);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    th = 30px
    .toolbar-menu {
        display inline-block
        height th
        line-height th
        font-size .9em
        -webkit-app-region no-drag
    }

    .item {
        position relative
        display inline-block
        height th
        line-height th
        padding 0 10px
        cursor pointer
        -webkit-app-region no-drag

        &:hover {
            background-color rgba(255, 255, 255, 0.1)

            .menu {
                opacity 1
                visibility visible
                z-index 999
            }
        }

        &:focus {
            background-color rgba(255, 255, 255, 0.1)
        }
    }

    .menu {
        display block
        position absolute
        left 0
        width 200px
        max-height 300px
        background-color #505050
        box-shadow 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12)

        visibility hidden
        opacity 0
        transition .5s

        ul {
            width 100%
            list-style none
            text-align left
        }

        li {
            padding-left 20px
            border-bottom 1px solid rgba(255, 255, 255, 0.1)

            &:hover {
                background-color rgba(0, 86, 156, 0.3)
            }

            &:last-child {
                border none
            }
        }
    }
</style>
